<template>
    <div class="storeInfo">
        <div class="head">    
            <p class="headTxt">门店抽奖活动</p>
            <el-form class="headForm">
                <el-button type="danger" @click="addFn">添加</el-button> 
            </el-form>  
        </div>
         
        <!-- tab部分 -->
        <div class="tabContainer">
            <el-table :data="tableData" stripe style="width: 100%;text-align:center">
                <el-table-column prop="activity_id" label="id" fixed></el-table-column>
                <el-table-column prop="title" label="名称"></el-table-column>
                <el-table-column prop="stage" label="活动日期" width="200"></el-table-column>
                <el-table-column prop="lottery_time" label="开奖时间"></el-table-column>
                <el-table-column prop="prize" label="奖品" width="320px;">
                    <template slot-scope="scope">
                        <p style="text-align:left;" v-for='pitem in scope.row.prize'  :key="pitem.item_id">{{pitem.item_name}}{{pitem.quantity}}{{pitem.uint}}</p>
                    </template>

                </el-table-column>
                <el-table-column prop="status_cn" label="状态"></el-table-column>
                <el-table-column prop="update_time" label="更新时间" width="200"> </el-table-column>

                <el-table-column  label="操作" prop="price_id" v-if="limitList.length>0">
                    <template  slot-scope="scope">            
                        <span v-for="(item,indexLimit) in limitList" :key="indexLimit" class="lightFont" @click="theClick(item.url,scope.row.activity_id,scope.row.title)">
                            <i v-if="item.url != 'detail' && scope.row.status==0">{{item.name}}</i>
                            <i v-if="item.url == 'detail' && scope.row.status!=0">{{item.name}}</i>
                            <i v-if="indexLimit == 0 && scope.row.status==0">&nbsp;|&nbsp;</i>
                        </span>
                    </template>
                </el-table-column>
                <el-table-column label="操作"  v-else>/</el-table-column>

            </el-table>
                        
        </div>
        <!-- 分页部分 -->
        <el-pagination
            background
            layout="total, prev, pager, next, jumper"
            @current-change="changePage"
            :page-size="size"
            :current-page.sync="pageNum"
            :hide-on-single-page=true
            :total="total">{{total}}
        </el-pagination>
       <!-- 编辑 -->
       <el-dialog :title="editTitle" :visible.sync="add_edit_show" class="business">
            <el-form ref="form" :model="editForm" label-width="80px">
                <el-form-item label="活动名称">
                    <el-input v-model="editForm.title"></el-input>
                </el-form-item>
                <el-form-item label="活动日期">
                    <el-date-picker type="date" value-format="yyyy-MM-dd" placeholder="活动日期" v-model="date" style="width: 100%;"></el-date-picker>
                </el-form-item>
     
                <el-form-item label="开奖时间">                    
                     <el-time-picker v-model="time" value-format="HH:mm:ss"  placeholder="开奖时间"></el-time-picker>
                </el-form-item>
                    <GoodCom v-on:throwFilePath='getGood'  txt='奖品' :curgood='prize' input_url="v1/item/search"></GoodCom>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="add_edit_show = false">取 消</el-button>
                <el-button type="primary" @click="confrim(editTitle)">确 定</el-button>
            </div>
        </el-dialog>
        <!-- 详情 -->
         <el-dialog :title="detailTitle" :visible.sync="detailShow" class="business prize">
            <el-table :data="detailData" stripe style="width: 100%;text-align:center">
                <el-table-column prop="nickname" label="用户名" fixed></el-table-column>
                <el-table-column prop="mobile" label="手机号"></el-table-column>
                <el-table-column prop="room_name" label="包厢" width="200"></el-table-column>
                <el-table-column prop="prize_cn" label="内容">
                    <template slot-scope="scope">
                        <p v-for="(pitem,i) in scope.row.prize_cn" :key="i">{{pitem}}</p>
                    </template>
                </el-table-column>
                <el-table-column prop="total_price" label="总价"></el-table-column>
            </el-table>
        </el-dialog>
    </div>
</template>
<style lang="scss">
.prize{
    .el-dialog{
        width:800px;
        .el-dialog__body{
            margin-top:15px
        }
    }
} 
</style>
<script>
import { abc } from "../../../../js/abc.js";
import {potUrl} from '../../../../js/config_url.js'; 0
import GoodsTemplate from '../../pop/sortNumGood.vue';
import Upimg from '../../pop/upload.vue'
// import {draggable} from 'vuedraggable';
var url= potUrl.rpriceList;
export default {
    components:{
        GoodCom:GoodsTemplate,
        Upimg,
    },
    data(){
        return {          
            tableData:[],
            total:50,
            size:20,
            form:{
                size:20,
                page:1

            },
            statusList:[
                {status:'0',status_cn:'未开始'},
                {status:'1',status_cn:'进行中'},
                {status:'2',status_cn:'已结束'},
                {status:'-1',status_cn:'已取消'}
                
            ],
            add_edit_show:false,
            storeId:[],
            editForm:{ 
                match_name:'', 
                awards:[{item_id:'',rank:1,award_num:''}],
                match_type:'1',
                start_time:'',
                end_time:''
            },
            simVal:'',
            pageNum:1,//page
            limitList:[],
            storeList:[],
            editTitle:'添加',
            prizeNum:'',//奖品数量
            default_txt:'',//编辑是回显的奖品
            match_id:'',//赛事id
            detailShow:false,//详情显示弹框
            detailData:[],//详情table的数据
            detailTitle:'',//详情弹框的头部内容
            prize:[],//放编辑时返回的奖品内容；
            date:'',//抽奖日期
            time:'',//开奖时间
        }
    },
    mounted(){
        var that = this;
        abc.getStore(that)
        // abc.get(that,potUrl.getuserstorelist,{},function(res) {
        //     that.storeList = res.data
        // })//获取门店列表-

        abc.get(that,potUrl.activitylist,that.form,function(res){
            that.total = parseInt(res.data.total)
            that.tableData =  res.data.list;
        });//列表
        
    },
    created(){
        var that = this;
        setTimeout(() => {
            var str = $('.router-link-active').attr('href');
            abc.limit(that,str)// 权限  
        }, 500)            
    },
    methods:{

        theClick(url,a,b){
            var that = this;
            console.log(url)
            if(url == 'edit'){
                that.activity_id = a;
                that.editTitle = '编辑'
                abc.get(that,potUrl.activityinfo,{activity_id:a},function(data){
                    // var res = data.data;
                    that.editForm = data.data;
                    that.prize = data.data.prize;

                })
                that.add_edit_show = true    
            }else if(url == 'detail'){
                that.detailShow = true;
                abc.get(that,potUrl.activityLottery,{activity_id:a},(data)=>{
                    console.log(data)
                    let arr = data.data;
                    if(arr.prize.length >1){
                        arr.prize_cn = arr.prize_cn.split(' ');
                    }else{
                       arr.prize_cn = [arr.prize_cn] 
                    }
                   
                    that.detailData = [arr]
                    console.log(that.detailData)
                })
            }else if(url == 'del'){
                //删除
                abc.twoTips(that,potUrl.activitydel,'确认要删除“'+b+'”抽奖活动',{activity_id:a},()=>{
                    abc.get(that,potUrl.activitylist,that.form,function(res){
                        that.total = parseInt(res.data.total)
                        that.tableData =  res.data.list;
                    });//列表
                })
            }
            
            
        },           
        changePage(val){
            var that = this;
            that.pageNum = val;
            this.form.page = val;
           abc.getList(that,potUrl.activitylist,that.form);
        },

        confrim(a){
            //确定按钮
            var that = this,url='';
            if(a == '添加'){
                url = potUrl.activityadd
            }else{
                url = potUrl.activityedit;
                that.editForm.activity_id = that.activity_id
            }
            that.editForm.prize = JSON.stringify(that.prize)
            that.editForm.lottery_time = that.date+' '+that.time;
            console.log(that.editForm)
            abc.post(that,url,that.editForm,function(res){
                that.add_edit_show = false;
                abc.get(that,potUrl.activitylist,that.form,function(res){
                    that.total = parseInt(res.data.total)
                    that.tableData =  res.data.list;
                });//列表
            })
        },
        addFn(){
            let that = this;
            that.add_edit_show = true;
            that.editTitle = '添加'
            that.editForm = {
                title:'', 
                stage:'',
                lottery_time:''
            }
            that.prize = []
        },
        getGood(res){
            //获取商品信息
            var that = this;
            that.editForm.prize = res;
        }
    }
}

</script>